<template>

<div class="loginBox">
  <div class="Fixing">
    <!--左侧图片-->
    <div style="display:inline-block">
      <img width="400px;" src="../../image/auth.png" alt="">
    </div>
    <!--右侧输入框-->
    <div class="textBox" style="display:inline-block">
      <div style="width:400px;height:450px">
        <el-form :model="form" status-icon :rules="rules" ref="form" class="demo-ruleForm" label-width="70px" >
          <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username" autocomplete="off" placeholder="请输入姓名"></el-input>
        </el-form-item>
          <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <!-- v-model.number输入number类型，否者默认为string -->
          <el-input v-model.number="form.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学校">
          <el-input v-model="form.school" placeholder="请填写学校"></el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="form.nickname" placeholder="请填写昵称"></el-input>
        </el-form-item>
        <el-form-item label="性别">
            <el-select v-model="form.gender" placeholder="请选择性别" style="width:100%">
              <el-option label="男" value="1"></el-option>
              <el-option label="女" value="0"></el-option>
            </el-select>
        </el-form-item>
          <div>
            <el-link :underline="false" disabled style="cursor: auto">已有账号？</el-link>
            <el-link type="primary" :underline="false" @click="toLogin">返回登陆</el-link>
          </div>
        <el-form-item style="margin-left:-60px">
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
<!--<router-view/>-->
</div>




</template>

<script>
// import {mapState} from 'vuex'
import axios from 'axios' 

export default {
  name: 'Home',
  components: {
    // HelloWorld

  },
  data(){
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else if(value.length<6){
          callback(new Error('密码不得小于6位'));}
          else{
          callback();
        }
      };
      var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('年龄不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            if (value > 100) {
              callback(new Error('不得大于100岁'));
            } else {
              callback();
            }
          }
        }, 1000);
      };
    return{
      // title:'',
      form:{
        username:'',
        gender:'',
        school:'',
        nickname:'',
        age:'',
        password:''
      },
      rules: {
          password: [
            { validator: validatePass, trigger: 'blur' }
          ],
          age: [
            { validator: checkAge, trigger: 'blur' }
          ],
        },
    }
  },
  created(){
    // this.get1()
    // this.get2()
    // this.post1()
    // this.regist();
    // this.login();
  },
  
  methods:{
    toLogin(){
      this.$router.push('login')
    },
    login(){
      axios({
        url:'http://49.235.98.65:3000/user/login',
        method:'POST',
        // data:{
        //   username:"wang",
        //   password:"123123",
        //   // header:{
        //   //   user:'60a8a71256ae60584bb0b37f'//user:'id'
        //   //   }
        //   },   
        })
        },
    onSubmit(){
      axios({
        url:'http://49.235.98.65:3000/user/regist',
        method:'POST',
        data:{
          username:this.form.username,
          gender:this.form.gender,
          school:this.form.school,
          nickname:this.form.nickname,
          age:this.form.age,
          password:this.form.password
        }
      }).then(res=>{
        console.log('res',res);
        this.$router.push('login')
      })
      .catch(err=>{
        console.log('err',err)
        this.$router.push('login')////////调试用
      })
      },
    post1(){
      axios({
        url:'http://192.168.10.123:9999/user/list',
        method:'POST',
        data:{
          page:1,
          size:3
        }
      }).then(res=>{
        console.log('res',res)
      })
      .catch(err=>{
        console.log('err',err)
      })
      },
    get1(){
      axios.get('http://192.168.10.123:9999/path1',{
        params:{
          id:12
        }
      })
      .then((res)=>{console.log('res',res);
      this.title=res.data.title;
      })
      .catch((err)=>{console.log('err',err)})
      },
    get2(){
      axios({
        url:'http://192.168.10.123:9999/path2',
        method:'GET',
        params:{
          id:14
        }
        // data:{
        //   id:12
        // }
      }).then(res=>{
        console.log('res',res)
        this.title=res.data.title;
      })
      .catch(err=>{
        console.log('err',err)
      })
      }
    }
  
}
</script>
<style scoped>
  .loginBox{
    width: 900px;
    height: 600px;
    margin: 50px auto;
    box-shadow: 0px 0px 20px rgba(33,33,33,.2);
    
  }
  .textBox{
    width: 400px;
    height: 450px;
    display: flex; 
    justify-content: center; 
    align-items: center; 
    justify-content: center;
  }
  .Fixing{
    width: 900px;
    height: 600px;
    display: flex; 
    justify-content: center; 
    align-items: center; 
    justify-content: center;
  }
</style>